import React from 'react';
import { Upload, Modal, Button } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
// import { getBase64 } from './upload.util'
import { beforeUploadVideo, uploadUrl } from './upload.util'

class VideoUploader extends React.Component {
  state = {
    previewVisible: false,
    previewImage: '',
    previewTitle: '',
    fileList: [],
  };

  clear= () => {
    this.setState({
      fileList: []
    })
  };
  
  handleCancel = () => this.setState({ previewVisible: false });

  handlePreview = (responsefileData) => {
    const url = responsefileData.response.data[0];
    this.setState({
      previewImage: url,
      previewVisible: true,
      previewTitle: responsefileData.name || url.substring(responsefileData.url.lastIndexOf('/') + 1),
    });
  };


  handleChange = ({ fileList }) => {
    this.setState({ fileList });
    const list = fileList.map(v => v.response ? v.response.data[0] : '').filter(v => !!v);
    this.props.onFileChange && this.props.onFileChange(list);
  };

  render() {
    const { previewVisible, previewImage, fileList, previewTitle } = this.state;

    return (
      <>
        <Upload
          action={uploadUrl}
          listType="picture"
          fileList={fileList}
          onPreview={this.handlePreview}
          accept="video/*"
          beforeUpload={beforeUploadVideo}
          onChange={this.handleChange}
        >
          {fileList.length >= 100 ? null : <Button icon={<UploadOutlined />}>上传视频</Button>}
        </Upload>
        <Modal
          visible={previewVisible}
          title={previewTitle}
          footer={null}
          width={800}
          onCancel={this.handleCancel}
        >
          <video src={previewImage} style={{ width: '100%', height: '400px' }} controls></video>
        </Modal>
      </>
    );
  }
}

export default VideoUploader;
